<template>
	<view class="pages">
		<view class="header">
			<view class="header-top">
				<view class="header-left">
					<!-- <view class="langage">{{ $t(`userDrawer.data[6].name`) }}</view>
					<view class="langage-box">
						<block v-for="(item, index) in langList" :key="index">
							<tui-collapse :hdBgColor="'unset'" bdBgColor="rgba(0,0,0,0.8)" :arrowColor="'#fff'"
								:index="index" :current="item.current" @click="change">
								<template v-slot:title>
									<view class="draw_nav_item">
										<view>
											<text class="pl-20">{{ $t(`userDrawer.data[6].name`) }}</text>
										</view>
									</view>
								</template>
								<template v-slot:content>
									<view class="tui-content" v-for="(items, idx) in item.intro" :key="idx"
										@click="languagelTab(items)">{{ $t(`userDrawer.language[${idx}].name`) }}
									</view>
								</template>
							</tui-collapse>
						</block>
					</view>
					<view class="download" v-if="showDownLoad" @click="downLoadApp()">
						<image class="icon" src="@/static/images/download.svg" mode=""></image>
					</view> -->
				</view>
				<view class="header-right">
					<view class="search" v-if="hasSearch">
						<view class="input" @click="search()">
							<text class="iconfont icon-sousuo"></text>
							<text class="place">{{ $t(`page.goodsDetail.search`) }}</text>
						</view>
					</view>
					<view class="btns" v-if="hasLogin">
						<view class="btn login" @click="merchantLogin()">
							{{ $t(`page.index.posLogin`) }}
						</view>
						<view class="btn register" @click="merchantRegister()">
							{{ $t(`page.index.pos`) }}
						</view>
					</view>
				</view>
			</view>
			<view class="header-bottom" v-if="noTools">
				<view class="logo">
					<image class="tui-skeleton-rect" :src="logoUrl" mode="widthFix" @click="goHome()"></image>
				</view>
				<view class="tools">
					<view class="item" hover-class="item-hover" v-for="(item, index) in toolsList" :key="index"
						@click="goPage(item)" v-if="item.isShow">
						<image class="icon" :src="item.img" mode="" v-if="item.isImg"></image>
						<i class="iconfont" :class="item.icon" v-else></i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getIndexData,
		setCouponReceive
	} from "@/api/api.js";
	import tuiCollapse from "@/components/tui-collapse/tui-collapse";
	import {
		chatConfig
	} from "@/utils/consumerType.js";
	import {
		mapGetters
	} from "vuex";
	import {
		getLogout
	} from "@/api/user.js";

	// (function (d, w, c) {
	//   if (w[c]) return;
	//   var s = d.createElement("script");
	//   w[c] = function () {
	//     (w[c].z = w[c].z || []).push(arguments);
	//   };
	//   s.async = true;
	//   s.src = "https://res.livechats.chat/plug/widget.js";
	//   if (d.head) d.head.appendChild(s);
	// })(document, window, "_ZHCHAT");
	// _ZHCHAT("ini", { channelId: "o9E8Fx" });
	// (function(d, w, c) {
	//     if (w[c]) return;
	//     var s = d.createElement('script');
	//     w[c] = function() {
	//         (w[c].z = w[c].z || []).push(arguments);
	//     };
	//     s.async = true;
	//     s.src = 'https://res.livechats.chat/plug/widget.js';
	//     if (d.head) d.head.appendChild(s);
	// })(document, window, '_ZHCHAT');
	// _ZHCHAT('ini', { channelId: 'o9E8Fx' })
	// _ZHCHAT('setLanguage', { type: 'en' })

	export default {
		name: "Header",
		computed: mapGetters(["isLogin", "chatUrl", "userInfo", "uid"]),
		data() {
			return {
				logoUrl: "",
				imgUrls: "",
				menuList: [],
				bastBanner: [],
				categoryList: [],
				rankingList: [],
				indexBannerType: "",
				languageOptions: ["zh", "en", "fr", "th", "lao"],
				langList: [{
					name: "语言",
					current: 1,
					intro: ["zh", "en", "fr", "th", "lao"],
				}, ],
				index: 1,
				curRoute: "",
				showDownLoad: true,
				toolsList: [{
						icon: "icon-sousuo",
						name: "搜索",
						url: "../../pages/goods_search/index",
						isShow: true,
						isNeedLogin: false,
					},
					// {
					// 	icon: "icon-suozi",
					// 	isImg: true,
					// 	img: "../../static/images/tongzhi.svg",
					// 	name: "消息",
					// 	url: "",
					// 	isShow: true,
					// 	isNeedLogin: true,
					// },
					{
						icon: "icon-kefu",
						name: "客服",
						url: "",
						isShow: true,
						type: "kefu",
						isNeedLogin: false,
						// clickFc: () => {
						//   location.href = "https://chat.livechats.chat/?channelId=cOC2t8";
						// },
					},
					// {
					//   icon: "icon-xihuan",
					//   name: "喜欢",
					//   url: "../../pages/users/user_goods_collection/index",
					//   isShow: true,
					//   isNeedLogin: true,
					// },
					// {
					//   icon: "icon-gouwuche",
					//   name: "购物车",
					//   url: "/pages/order_addcart/order_addcart",
					//   type: "tabbar",
					//   isShow: true,
					//   isNeedLogin: true,
					// },
				],
			};
		},
		props: {
			noTools: {
				type: Boolean,
				default: () => true,
			},
			hasLogin: {
				type: Boolean,
				default: () => true,
			},
			hasSearch: {
				type: Boolean,
				default: () => false,
			},
		},
		comments: {
			tuiCollapse,
		},
		mounted() {
			this.getIndexConfig();
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route; // 获取当前页面路由，也就是最后一个打开的页面路由
			this.toolsList.forEach((v) => {
				if (v.url.indexOf(curRoute) > -1) {
					v.isShow = false;
				}
			});

			if (curRoute === "pages/index/index") {
				this.showDownLoad = true;
			} else {
				this.showDownLoad = false;
			}
			// this.getServerClient();
			// console.log('【当前路由】', curRoute);
		},
		onShow() {},
		methods: {
			bindPickerChange: function(e) {
				console.log("picker发送选择改变，携带值为", e.detail.value);
				this.index = e.detail.value;
				this._i18n.locale = this.languageOptions[e.detail.value];
				uni.setStorageSync("locale", this.languageOptions[e.detail.value]);
			},
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData()
					.then((res) => {
						that.$set(that, "logoUrl", res.data.logoUrl);
						that.$set(that, "imgUrls", res.data.banner);
						that.$set(that, "menuList", res.data.menus); //bastBanner
						that.$set(that, "bastBanner", res.data.bastBanner); //bastBanner
						that.$set(that, "categoryList", res.data.categoryList); //categoryList
						that.$set(that, "rankingList", res.data.ranking);
						that.$set(that, "indexBannerType", res.data.indexBannerType);
						// 保存商品分类页配置
						that.$Cache.setItem({
							name: "categoryConfig",
							value: {
								categoryConfig: res.data.categoryPageConfig,
								isShowCategory: res.data.isShowCategory,
							},
						});
						that.$store.commit("SET_CHATURL", res.data.consumerH5Url);
						Cache.setItem({
							name: "merPlatChatConfig",
							value: {
								consumerHotline: res.data.consumerHotline, //客服电话
								consumerH5Url: "https://chat.livechats.chat/?channelId=cOC2t8", //云智服
								// consumerH5Url: res.data.consumerH5Url, //云智服
								consumerMessage: res.data.consumerMessage, //基于facebook的message消息
								consumerEmail: res.data.consumerEmail, //客服邮箱
								consumerType: res.data.consumerType, //客服类型四选一
							},
						});
					})
					.catch((err) => {
						return this.$util.Tips({
							title: err,
						});
					});
			},
			goPage(item) {
				console.log('item.type :>> ', item.type);
				if (item.isNeedLogin && !this.isLogin) {
					getLogout()
						.then((res) => {
							that.$Cache.set("login_back_url", "/pages/index/index");
							that.$store.commit("LOGOUT");
							uni.reLaunch({
								url: "/pages/index/index",
							});
						})
						.catch((err) => {
							console.log(err);
						});
					return false;
				}
				if (item.type === "tabbar") {
					uni.switchTab({
						url: item.url,
					});
				} else if (item.type === "kefu") {
					this.kefuClick();
				} else {
					uni.navigateTo({
						url: item.url,
					});
				}
			},
			change(e) {
				let index = e.index;
				let item = this.langList[index];
				item.current = item.current == index ? -1 : index;
			},
			close() {
				this.$emit("close");
			},
			languagelTab(n) {
				//  语言切换
				this._i18n.locale = n;
				uni.setStorageSync("locale", n);
			},
			kefuClick() {
				location.href = `https://chat.livechats.chat/?channelId=cOC2t8&language=en`;
				// chatConfig();
				// this.getServerClient();
			},
			search() {
				uni.navigateTo({
					url: "/pages/goods_search/index",
				});
			},
			// 商户登录
			merchantLogin() {
				window.location.replace("https://app.mer.shopconch.com/pages/users/merchantLogin/index");
				// uni.navigateTo({
				//   url: "/pages/users/merchantLogin/index",
				// });
			},
			// 商户注册
			merchantRegister() {
				// uni.navigateTo({
				//   url: "/pages/users/merchantRegister/index",
				// });
				window.location.replace("https://app.mer.shopconch.com/pages/users/merchantRegister/index");

			},
			goHome() {
				uni.reLaunch({
					url: "/pages/index/index",
				});
			},
			downLoadApp() {
				window.location.href = "https://87vzz.dfhcsje.com/2178w";
			},
			getServerClient() {
				// (function(d, w, c) {
				//     if (w[c]) return;
				//     var s = d.createElement('script');
				//     w[c] = function() {
				//         (w[c].z = w[c].z || []).push(arguments);
				//     };
				//     s.async = true;
				//     s.src = 'https://res.livechats.chat/plug/widget.js';
				//     if (d.head) d.head.appendChild(s);
				// })(document, window, '_ZHCHAT');
				// _ZHCHAT('ini', { channelId: 'o9E8Fx' })
				// _ZHCHAT('setLanguage', { type: 'en' })
			}
		},
	};
</script>

<style lang="scss">
	.header {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;

		.header-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx 0 30rpx;
			height: 100rpx;
			background-color: #222222;
			width: 100%;
			color: #fff;

			.header-left {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.picker {
					position: relative;
					margin-right: 10rpx;
					width: 100rpx;
					border: 1rpx solid #222222;

					.below {
						position: absolute;
						right: 10rpx;
						top: 5rpx;
						width: 30rpx;
						height: 30rpx;
						fill: #ffffff;
					}

					// .below.active{
					// 	transform:rotate(180deg);
					// }
				}

				.picker:hover {
					.below {
						// transform:rotate(180deg);
					}
				}

				.langage-box {}

				.download {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 60rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.header-right {
				display: flex;
				align-content: center;
				justify-content: flex-end;

				.search {
					box-sizing: border-box;
					flex: 1;
					height: unset;

					.input {
						display: flex;
						align-content: center;
						justify-content: flex-end;
						padding: 10rpx;
						width: 100%;

						.iconfont {
							margin-right: 20rpx;
						}
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 26rpx;

					.btn {
						position: relative;
					}

					.btn:first-child {
						margin-right: 25rpx;
					}

					.btn:first-child::after {
						position: absolute;
						top: 10rpx;
						content: "";
						background-color: #fff;
						height: 20rpx;
						width: 2rpx;
						margin: 0 10rpx;
					}
				}
			}
		}

		.header-bottom {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: #fff;

			.logo {
				width: 100rpx;

				.tui-skeleton-rect {
					width: 100%;
					height: 100%;
				}
			}

			.tools {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 50%;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;

					.icon {
						width: 50rpx;
						height: 50rpx;
					}

					.iconfont {
						font-size: 50rpx;
					}
				}

				.item-hover {
					scale: 0.9;
				}
			}
		}

		// .logo{
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	width: 100px;
		// 	margin-right: auto;
		// 	padding: 5px;
		// }
		// image {
		// 	width: 100rpx;
		// 	height: 45px;
		// }
		.search {
			width: 450rpx;
			height: 65rpx;

			.search_input {
				width: 100%;
				height: 65rpx;
				line-height: 65rpx;
				background: #ffffff;
				border-radius: 35rpx;
				position: relative;

				.input_btn {
					position: absolute;
					top: 0;
					right: 0;
					width: 82rpx;
					height: 64rpx;
					background: #eeeeee;
					border-radius: 0px 35rpx 35rpx 0px;
					text-align: center;
					line-height: 64rpx;
					font-size: 28rpx;
					color: #999;
				}
			}
		}

		.open {
			width: 40rpx;
			height: 36rpx;
			color: #fff;
			font-size: 40rpx;
			margin: 0 36rpx 0 30rpx;
		}
	}

	.tui-collapse-head {
		background-color: unset;
	}
</style>